<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PHP注册</title>
</head>
<body>
	
	<form action="http://127.0.0.1/PHPStudy/reg/reg.php" method="post">
		昵称：<input type="text" name="username" autocomplete="off"><br>
		手机：<input type="text" name="tel" autocomplete="off"><br>
		邮箱：<input type="email" name="email" autocomplete="off"><br>
		密码：<input type="password" name="password" autocomplete="off"><br>
		上传头像：<input type="text" name="headimg" id="headimg" readonly><br>
		<input type="submit" name="submit" value="提交">
	</form>
	<br>
	<img id="imgHead" src="" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"/>
	<br>
	<form id="formupload" enctype="multipart/form-data">
		<label for="file">用户头像：</label>
		<input type="file" name="uploadfile" id="file"><br>
	</form>
	
	<script src="jquery-3.2.1.min.js"></script>
	<script>
		$("#file").on("change",function(){
			var uploadform = new FormData($("#formupload")[0]);
			$.ajax({
				url:"http://127.0.0.1/PHPStudy/reg/upload.php",
				type:"post",
				dataType:"json",
				processData: false,
	/*
	 *(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
	 */
				contentType: false,
	/*
	 *(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）
	 */			
				data:uploadform,
				success:function(res){
					console.log(res);
					$("#imgHead").attr("src", res.newfile);
					$("#headimg").val(res.newfile);
				},error:function(msg){
					console.log("error", msg);
				}
			});

		})
	</script>
</body>
</html>